<script setup lang="ts">
import { NDataTable, type DataTableColumns } from 'naive-ui'
import type { WorkFlow } from '@/api/djRecord'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'

const route = useRoute()

const columns: DataTableColumns<WorkFlow['infoVo']['approvalRecordsList']> = [
  {
    title: '类型',
    key: 'type'
  },
  {
    title: '人员',
    key: 'userName'
  },
  {
    title: '时间',
    key: 'time'
  },
  {
    title: '结果',
    key: 'result'
  },
  {
    title: '备注',
    key: 'remark'
  }
]

const workFlow = ref({} as WorkFlow['infoVo'])
const queryWorkFlow = async () => {
  const [error, res] = await sendRequest({
    module: 'djRecord',
    api: 'workFlow',
    override: {
      params: {
        djRecordId: route.query.id
      }
    }
  })

  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  workFlow.value = res.data.infoVo || {}
}

onMounted(() => queryWorkFlow())
</script>

<template>
  <div class="ar-title">审批记录</div>
  <div class="ar-card">
    <NDataTable
      :data="workFlow.approvalRecordsList"
      :columns="columns"
    />
  </div>
</template>

<style lang="scss" scoped>
.ar-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.ar-card {
  padding: 20rem;
  background-color: #e1e1e1;

  &.form {
    display: flex;
    gap: 0 32rem;
  }
}
</style>
